<template>
  <div>

    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css">
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"/>

    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player"/>
  </div>
</template>
<script>
import vodApi from '@/api/vod'

export default {
  // layout: 'video',//应用video布局
  // asyncData({ params, error }) {
  //    return vod.getPlayAuth(params.vid)
  //     .then(response => {
  //       console.log(response)
  //         return {
  //             playAuth: response.data.playAuth,
  //             vid: params.vid
  //         }
  //     })
  // },
  // mounted() { //页面渲染之后  created
  //     new Aliplayer({
  //         id: 'J_prismPlayer',
  //         vid: this.vid, // 视频id
  //         playauth: this.playAuth, // 播放凭证
  //         encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
  //         width: '100%',
  //         height: '500px',
  //         // 以下可选设置
  //         cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
  //         qualitySort: 'asc', // 清晰度排序
  //
  //         mediaType: 'video', // 返回音频还是视频
  //         autoplay: false, // 自动播放
  //         isLive: false, // 直播
  //         rePlay: false, // 循环播放
  //         preload: true,
  //         controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
  //         useH5Prism: true, // 播放器类型：html5
  //     }, function(player) {
  //         console.log('播放器创建成功')
  //     })
  // }
  data() {
    return {
      // playShow: false,
      vid: '', //视频vid
      playAuth: '', //鉴权地址
    }
  },
  methods: {
    //初始化
    playView() {
      new Aliplayer({
        id: 'J_prismPlayer',
        vid: this.vid, // 视频id
        playauth: this.playAuth, // 播放凭证
        encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
        width: '100%',
        height: '500px',
        // 以下可选设置
        cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
        qualitySort: 'asc', // 清晰度排序
        mediaType: 'video', // 返回音频还是视频
        autoplay: false, // 自动播放
        isLive: false, // 直播
        rePlay: false, // 循环播放
        preload: true,
        controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
        useH5Prism: true, // 播放器类型：html5
      }, function (player) {
        console.log('播放器创建成功')
      })
    },
    colseVideo() {
      // //重新子组件初始化
      this.$refs.player.initAliplayer()
    },
    seeVideo(vid) {
      console.log("进入获取方法")
      this.playAuth = ''
      //根据vid去查凭证
      console.log(this.vid)
      vodApi.getPlayAuth(this.vid).then(res => {
        this.playAuth = res.data
        // this.playShow = true
        this.playView()
      })

    },
  },
  created() {
    this.vid = this.$route.query.vid
    console.log(this.vid)
    this.seeVideo(this.vid)
  },
}
</script>
